<template>
	<view>
		<view class="search">
			<input class="search-input" placeholder="请输入操作内容" v-model="params.title" />
			<button class="search-btn" hover-class="search-btn-hover" @click="searchData">搜索</button>
		</view>
		<scroll-view class="list" :scroll-y="true" @scrolltolower="loadLog()" v-if="Object.keys(log).length > 0">
			<view v-for="(item, index) in log" :key="index">
				<view class="list-item">
					<view><text class="lable">操作内容：</text><text>{{item.title}}</text></view>
					<view><text class="lable">请求地址：</text><text>{{item.operUrl}}</text></view>
					<view><text class="lable">操作地址：</text><text>{{item.operLocation}}</text></view>
					<view><text class="lable">操作时间：</text><text>{{item.operTime}}</text></view>
				</view>
			</view>
		</scroll-view>
		<Loading v-else></Loading>
	</view>
</template>

<script>
	import {
		getLog
	} from '@/api/system/log.js'
	import {
		getInfo
	} from '@/api/system/user'
	import Loading from '@/components/Loading/Loading.vue'

	export default {
		components: {
			Loading
		},
		data() {
			return {
				params: {
					pageNum: 1,
					pageSize: 10,
					title: ''
				},
				userId: '',
				log: []
			}
		},
		created() {
			this.getUserInfo()
			this.getLogInfo()
		},
		methods: {
			getUserInfo() {
				const app = this
				getInfo().then(result => {
					app.params.operName = result.data.user.userName
				})
			},
			getLogInfo() {
				const app = this
				getLog(app.params).then(result => {
					app.log = app.log.concat(result.data.rows);
				})

			},
			searchData() {
				this.params.pageNum = 0
				this.log = []
				this.getLogInfo()
			},
			loadLog() {
				console.log("底部加载")
				this.params.pageNum += 1
				this.getLogInfo()
			}
		}
	}
</script>

<style scoped>
	.search {
		padding: 0.5rem;
		display: flex;
	}

	.search-input {
		width: 75%;
		height: 2rem;
		padding: 0 1rem;
		border: 0.1rem #ccc solid;
		border-radius: 1rem;
	}

	.search-btn {
		height: 2.2rem;
		background-color: #3498db;
		border-radius: 1rem;
		color: #fff;
		font-size: 2.5vw;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-btn-hover {
		background-color: #2f8ac7;
	}

	.list {
		height: 100vh;
	}

	.list-item {
		margin: 0 1rem;
		padding: 0.5rem 0;
		border-bottom: 0.1rem solid #ccc;
		white-space: nowrap;
	}
	
	.lable {
		margin-right: 0.1rem;
		color: #888;
	}
</style>